<template>

	<moment-searchbar :focus="true"></moment-searchbar>

	<view id="searchHistories" class="searchElements">
		<view class="titleBar">
			<view id="historyTitle" class="title">
				搜索历史
			</view>
			<view class="clear" @click="clearHistory">
				清空
			</view>
		</view>
		<button v-for="history in historyList" class="element" @click="search(history)">{{history}}</button>
	</view>

	<view id="searchRecommendations" class="searchElements">
		<view class="titleBar">
			<view id="recommendationTitle" class="title">
				推荐搜索
			</view>
		</view>
		<button v-for="recommendation in recommendationList" class="element"
			@click="search(recommendation)">{{recommendation}}</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const historyList = ref(["宠物生日照"]);
	const recommendationList = ref(["生日照", "钥匙扣", "宠物周边", "日历", "可爱萌宠", "时尚萌宠", "萌宠合影", "九宫格"]);

	function search(query) {
		console.log("搜索'" + query + "'");
		uni.navigateTo({
			url: "/pages/moments/moments-filtered/moments-filtered?query=" + query
		})
	};

	function clearHistory() {
		console.log("清空历史记录");
		historyList.value = [];
	};
</script>

<style lang="scss">
	page {}

	.searchElements {
		margin: 20px;
		display: flex;
		flex-wrap: wrap;
	}

	.titleBar {
		width: 100%;
		display: flex;
		margin: 10px;
		align-items: center;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #E09AB5;
		text-align: left;
		flex: 8;
	}

	.clear {
		font-size: 16px;
		color: #c3c3c3;
		text-align: right;
		flex: 2;
	}

	.element {
		font-size: 14px;
		border-radius: 14px;
		margin: 5px;
		background: none;
		border: 1px solid #264553;
	}
</style>